"use server";
import { Avatar, Button, Card, message } from "antd";
import React from "react";
import Title from "antd/es/typography/Title";
import { getQuestionBankVoByIdUsingGet } from "@/api/questionBankController";
import Meta from "antd/es/card/Meta";
import Paragraph from "antd/es/typography/Paragraph";
import QuestionList from "@/components/QuestionList";

// @ts-ignore
export default async function BankPage({ params }) {
  // 接收参数
  const { questionBankId } = params;
  let bank = undefined;

  try {
    const res = await getQuestionBankVoByIdUsingGet({
      id: questionBankId,
      needQueryQuestionList: true,
      pageSize: 100,
    });
    bank = res.data;
  } catch (e) {
    message.error("获取题库失败");
  }
  if (!bank) {
    return <div>题库不存在</div>;
  }

  // 点击跳转-->获取题库信息--》第一题
  // 获取第一道题目，用于 “开始刷题” 按钮跳转
  let firstQuestionId;
  if (bank.questionPage?.records && bank.questionPage.records.length > 0) {
    firstQuestionId = bank.questionPage.records[0].id;
  }

  return (
    <div id="bankPage" style={{ width: "100%", padding: "10px" }}>
      <Card>
        <Meta
          avatar={<Avatar src={bank.picture} size={64} />}
          title={
            <Title level={3} style={{ marginBottom: 0 }}>
              {bank.title}
            </Title>
          }
          description={
            <>
              <Paragraph type="secondary">{bank.description}</Paragraph>
              <Button
                type="primary"
                shape="round"
                href={`/bank/${questionBankId}/question/${firstQuestionId}`}
                target="_blank"
                disabled={!firstQuestionId}
              >
                开始刷题
              </Button>
            </>
          }
        ></Meta>
      </Card>
      <div style={{ marginTop: "20px" }}>
        <QuestionList
          questionBankId={questionBankId}
          questionList={bank.questionPage?.records ?? []}
          cardTitle={`题目列表(${bank.questionPage?.total || 0})`}
        />
      </div>
    </div>
  );
}
